<template>
	<div class="search searchBox">
		<el-form :model="form">
			<el-form-item label="注册时间" v-if="options.noTime">
				<el-date-picker v-model="form.startdate" type="date" placeholder="选择日期" format="yyyy-MM-dd"
				value-format="yyyy-MM-dd" style="width:140px"
				></el-date-picker>~
				<el-date-picker v-model="form.enddate" type="date" placeholder="选择日期"
					format="yyyy-MM-dd" value-format="yyyy-MM-dd" style="width:140px"
				></el-date-picker>
			</el-form-item>
			<el-form-item label="手机号码" v-if="options.noTelphone" >
				<el-input v-model="form.phone" placeholder="请输入手机号码" style="width:217px" clearable
				></el-input>
			</el-form-item>
			<el-form-item label="关键字" v-if="options.keyval" >
				<el-input v-model="form.keyval" placeholder="请输入门店活岗位名称" style="width:217px" clearable
				></el-input>
			</el-form-item>
			<el-form-item label="职位名称" v-if="options.noPosition" >
				<el-select v-model="form.jobTitle" placeholder="请选择" clearable style="width:217px">
					<el-option v-for="item in jobNameList" :key="item.key" :label="item.value" :value="item.key"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="实名用户" v-if="options.noUser">
				<el-input v-model="form.name" placeholder="请输入实名用户" style="width:217px" clearable></el-input>
			</el-form-item>
			<el-form-item label="所在地区" v-if="options.noCity">
				<city-Cascader :citys="form.citys" :level="level" @handleChange="handleCityChange"></city-Cascader>
			</el-form-item>
			<el-form-item label="薪资待遇" v-if="options.noSalary">
				<el-select v-model="form.salary" placeholder="请选择" clearable style="width:217px">
					<el-option v-for="item in moneyList" :key="item.value" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="雇主姓名" v-if="options.noEmployer" >
				<el-input v-model="form.username" placeholder="请输入雇主姓名" style="width:217px" clearable></el-input>
			</el-form-item>
			<el-form-item style="width:288px;text-align:center;float: right;">
				<!-- <el-button @click="reset('sform')" class="searchBtn">重置</el-button> -->
				<!-- 点击查询 触发search这个方法 -->
				<el-button type="primary" @click="search()" class="searchBtn">查询</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
import cityCascader from "../../component/cityCascader/index.vue";	
import cityData from "../../assets/citys.json";
import jobsJson from "../../assets/jobs.json";
export default{
	components:{
		cityCascader
	},
	props:{
		options:{
			type: Object
		}
	},
	data(){
		return {
			form:{
				keyval:"",
				startdate:"",	//开始时间
				enddate:"",		//结束时间 
				salary:"",		//薪资待遇
				username:"",	//雇主姓名
				phone:"",		//电话
				name:"",		//实名用户名
				jobTitle:"",	//职位名称
				citys:[],		//所在地
				province:"",	//省份-上海市
				city:"",		//城市-上海市
				county:"",		//区域-闵行区
			},
			level:'0',
			typeList:[],		
			sizeList:[],
			jobNameList:[],		//职位名称数组
			moneyList:[]		//薪资待遇数组
		}
	},
	mounted(){
		this.getSize();
		this.jobNameList = jobsJson.jobNameList;
		this.moneyList = jobsJson.moneyList;
	},
	methods:{
		search(){
			let params = {};
			if(!(this.form.citys[0]>0)){
				this.form.province = '';
			}
			if(!(this.form.citys[1]>0)){
				this.form.city = '';
			}
			if(!(this.form.citys[2]>0)){
				this.form.county = '';
			}
			for(let i in this.form){
			    if(this.form[i] && i != 'citys'){
			        params[i] = this.form[i];
			    }
			}
			console.log(params);
			if(params.startdate && params.enddate && Date.parse(params.startdate) > Date.parse(params.enddate)){
				this.$message({
					message:"结束时间不能早于开始时间",
					type:"warning"
				});
				return false;
			}
			this.$emit('searchList',params);
		},
		// 选择城市
		handleCityChange (val) {
			this.form.citys = val;
			this.cityConvert(val);
		},
		//城市转换,将城市编号转换为城市名
		cityConvert(val){
			let citys = cityData.city;
			citys.forEach(item => {
				if(item.code === val[0]){
					this.form.province = item.name;
					item.subLevelModelList.forEach(item1 => {
						if(item1.code === val[1]){
							this.form.city = item1.name;
							item1.subLevelModelList.forEach(item2 => {
								if(item2.code === val[2]){
									this.form.county = item2.name;
								}
							})
						}
					})
				}
			})
		},
		// 获取公司规模 查询条件的下拉列表
		getSize () {
		  this.$axios
		    .post("/system/v1/common/dict", { groupid: "companysize" })
		    .then(res => {
		      if (res.data.message === "success.") {
		        this.sizeList = res.data.data;
		      } else {
		        this.$message({
		          message: res.data.message,
		          type: "error"
		        });
		      }
		    });
		}
	}
}
</script>

<style scoped="scoped">
.search{
	margin-top: 20px;
	width: 100%;
}
.formItemBox {
	width: 100%;
}
.el-form-item {
	width: 400px;
	min-width: 33%;
	float: left;
}
.searchBtn {
  width: 140px;
}
.searchBox {
  padding: 0 30px;
}
</style>
